<template>
  <div>
    <div>
      <h1 style="font-size:25px">用户信用情况预测结果</h1>
      <br/>
      <div style="font-size:16px">
        <span class="emphasis">{{ form.name }} </span>先生/女士，您的评估如下：
        年龄:<span class="emphasis">{{ age_c }}</span>,贷款负担:<span class="emphasis">{{ burden_c }}</span>,超期拖欠欠款次数:<span
          class="emphasis">{{ owe_c }}</span>,总体信用评价:<span class="emphasis">{{comment_c}}</span>。
      </div>
      <br/>
      <div id="main" style=" margin: 0 auto;width: 400px; height: 350px"></div>
    </div>

    <a-modal
        title="评分卡详情"
        :visible="isShow"
        @ok="closeModal"
        @cancel="closeModal"
        width="940px"
        height="400px"
    >

      <img src="../img/img.png"/>
    </a-modal>
    <a-button @click="backToMain" style="margin-right:50px">
      <a-icon type="left"/>
      返回测试页面
    </a-button>
    <a-button @click="showDetail">
      查看评分卡
    </a-button>

  </div>
</template>

<script>
import * as echarts from "echarts";
import aGetScore from "./js/Score"

export default {
  name: "result",
  data() {
    return {
      score: 666,
      isShow: false,
      ModalText: "",
      form: {},
      age_c: '',
      burden_c: '',
      owe_c: '',
      comment_c: ''
    }
  },
  methods: {
    getInfo() {
      this.age_c = (this.form.age<35)?"正处青年":(this.form.age<60?"人在中年":"步入老年");
      this.burden_c = (this.form.revolvingRatio<0.35)?"负债毫无压力":(this.form.revolvingRatio<0.35?"负债略有压力":"负债压力巨大");
      this.owe_c = (this.form.thirty+this.form.sixty+this.form.ninety<=2)?"超期次数少":(this.form.thirty+this.form.sixty+this.form.ninety<=4?"超期次数较多":"超期次数过多");
      this.comment_c = (this.score>600)?"信用良好":(this.score>500?"信用一般":"信用较差");
    },
    backToMain() {
      localStorage.removeItem("session");
      this.$router.push("/mainPage");
    },
    showDetail() {
      this.isShow = true;
    },
    closeModal() {
      this.isShow = false;
    },
    getScore() {
      let self = this;
      aGetScore(self.form.age, self.form.revolvingRatio, self.form.thirty, self.form.sixty, self.form.ninety).then(res => {
        if (res.result) {
          self.score = res.score;
          self.getInfo();
          self.loadScore();
        } else {
          this.$message.error("查询出错，请稍后再试");
        }
      })
    },
    loadScore() {
      let self = this;
      let chartDom = document.getElementById("main");
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 700,
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                width: 20,
                color: [
                  [0.25, "rgba(210,210,252,0.39)"],
                  [0.5, "rgba(94,94,255,0.56)"],
                  [0.75, "rgba(56,56,253,0.72)"],
                  [1, "rgba(0,0,253,0.82)"],
                ],
              },
            },
            pointer: {
              icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
              length: "12%",
              width: 20,
              offsetCenter: [0, "-60%"],
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              length: 12,
              lineStyle: {
                color: "auto",
                width: 2,
              },
            },
            splitLine: {
              length: 20,
              lineStyle: {
                color: "auto",
                width: 5,
              },
            },
            axisLabel: {
              color: "#303133",
              fontSize: 20,
              distance: -70,
              formatter: function (value) {
                if (value / 700 === 0.875) {
                  return "优异";
                } else if (value / 700 === 0.625) {
                  return "良好";
                } else if (value / 700 === 0.375) {
                  return "中等";
                } else if (value / 700 === 0.125) {
                  return "较差";
                }
              },
            },
            title: {
              offsetCenter: [0, "-20%"],
              fontSize: 20,
            },
            detail: {
              fontSize: 40,
              distance: 50,
              offsetCenter: [0, "0%"],
              valueAnimation: true,
              formatter: function (value) {
                return value + "分";
              },
              color: "rgba(94,94,255,0.56)",
            },
            data: [
              {
                distance: -60,
                value: self.score,
                color: "#557CA4",
                name: "信用评定",
              },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    }
  },
  mounted() {
    this.form = JSON.parse(localStorage.getItem("session"));
    console.log(this.form)
    this.getScore()
  }
}
</script>

<style scoped>
.emphasis {
  color: blue;
  font-weight: 600;
}
</style>